<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇率兑换工具 - 纯前端版</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container { max-width: 600px; margin-top: 50px; }
        #resultCard, #errorAlert { display: none; margin-top: 20px; }
        .rate-label { font-size: 0.9em; color: #666; }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="mb-4">汇率兑换工具</h2>
        <div class="rate-label">固定汇率：1 USD = 7.00 CNY</div>

        <!-- 输入区 -->
        <div class="card">
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">金额</label>
                    <input type="number" 
                           step="0.01" 
                           class="form-control" 
                           id="amountInput" 
                           placeholder="请输入金额"
                           min="0.01">
                </div>
                <div class="mb-3">
                    <label class="form-label">货币类型</label>
                    <select class="form-select" id="currencySelect">
                        <option value="USD">美元 (USD) → 人民币 (CNY)</option>
                        <option value="CNY">人民币 (CNY) → 美元 (USD)</option>
                    </select>
                </div>
                <button class="btn btn-primary w-100" onclick="calculate()">立即兑换</button>
            </div>
        </div>

        <!-- 结果显示 -->
        <div class="card" id="resultCard">
            <div class="card-body">
                <h5 class="card-title" id="resultText"></h5>
            </div>
        </div>

        <!-- 错误提示 -->
        <div class="alert alert-danger mt-3" id="errorAlert"></div>
    </div>

    <script>
        // 汇率常量
        const EXCHANGE_RATE = 7.0;

        // 核心计算函数
        function convertCurrency(amount, currency) {
            if (currency === 'USD') {
                return {
                    value: (amount * EXCHANGE_RATE).toFixed(2),
                    target: 'CNY'
                };
            } else {
                return {
                    value: (amount / EXCHANGE_RATE).toFixed(2),
                    target: 'USD'
                };
            }
        }

        // 输入验证
        function validateInput(amount) {
            if (isNaN(amount) || amount <= 0) {
                showError('请输入有效的正数金额');
                return false;
            }
            return true;
        }

        // 显示错误信息
        function showError(message) {
            const errorAlert = document.getElementById('errorAlert');
            errorAlert.innerText = message;
            errorAlert.style.display = 'block';
            hideResult();
        }

        // 隐藏错误提示
        function hideError() {
            document.getElementById('errorAlert').style.display = 'none';
        }

        // 显示结果
        function showResult(text) {
            const resultCard = document.getElementById('resultCard');
            const resultText = document.getElementById('resultText');
            resultText.innerText = text;
            resultCard.style.display = 'block';
            hideError();
        }

        // 隐藏结果
        function hideResult() {
            document.getElementById('resultCard').style.display = 'none';
        }

        // 主计算函数
        function calculate() {
            // 获取输入值
            const amount = parseFloat(document.getElementById('amountInput').value);
            const currency = document.getElementById('currencySelect').value;

            // 隐藏旧提示
            hideError();
            hideResult();

            // 输入验证
            if (!validateInput(amount)) return;

            // 执行兑换计算
            const result = convertCurrency(amount, currency);

            // 显示结果
            const originalText = `${amount.toFixed(2)} ${currency}`;
            const resultText = `${result.value} ${result.target}`;
            showResult(`${originalText} = ${resultText}`);
        }
    </script>
</body>
</html>